<template>
  <div ref="container" style="height: 400px"></div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  name: 'ChartSale',
  data() {
    return {
      data: [
        {
          name: 14513,
          carat: 1.35,
          cut: 'Ideal',
          color: 'J',
          clarity: 'VS2',
          depth: 61.4,
          table: 57,
          price: 5862,
          x: 7.1,
          y: 7.13,
          z: 4.37
        },
        {
          name: 28685,
          carat: 0.3,
          cut: 'Good',
          color: 'G',
          clarity: 'VVS1',
          depth: 64,
          table: 57,
          price: 678,
          x: 4.23,
          y: 4.27,
          z: 2.72
        },
        {
          name: 50368,
          carat: 0.75,
          cut: 'Ideal',
          color: 'F',
          clarity: 'SI2',
          depth: 59.2,
          table: 60,
          price: 2248,
          x: 5.87,
          y: 5.92,
          z: 3.49
        },
        {
          name: 7721,
          carat: 0.26,
          cut: 'Ideal',
          color: 'F',
          clarity: 'VS1',
          depth: 60.9,
          table: 57,
          price: 580,
          x: 4.13,
          y: 4.11,
          z: 2.51
        },
        {
          name: 31082,
          carat: 0.33,
          cut: 'Premium',
          color: 'H',
          clarity: 'VVS1',
          depth: 61.4,
          table: 59,
          price: 752,
          x: 4.42,
          y: 4.44,
          z: 2.72
        },
        {
          name: 26429,
          carat: 1.52,
          cut: 'Ideal',
          color: 'G',
          clarity: 'VVS1',
          depth: 62.4,
          table: 55,
          price: 15959,
          x: 7.3,
          y: 7.39,
          z: 4.58
        },
        {
          name: 35900,
          carat: 0.32,
          cut: 'Ideal',
          color: 'G',
          clarity: 'IF',
          depth: 61.3,
          table: 54,
          price: 918,
          x: 4.41,
          y: 4.47,
          z: 2.72
        },
        {
          name: 27015,
          carat: 2.25,
          cut: 'Ideal',
          color: 'I',
          clarity: 'SI2',
          depth: 62.4,
          table: 57,
          price: 17143,
          x: 8.39,
          y: 8.32,
          z: 5.21
        },
        {
          name: 30760,
          carat: 0.25,
          cut: 'Premium',
          color: 'E',
          clarity: 'VVS2',
          depth: 62.5,
          table: 59,
          price: 740,
          x: 4.04,
          y: 4.02,
          z: 2.52
        },
        {
          name: 2205,
          carat: 1.02,
          cut: 'Premium',
          color: 'H',
          clarity: 'I1',
          depth: 62.5,
          table: 60,
          price: 3141,
          x: 6.39,
          y: 6.41,
          z: 4
        },
        {
          name: 25584,
          carat: 2.01,
          cut: 'Very-Good',
          color: 'H',
          clarity: 'SI2',
          depth: 62.9,
          table: 55,
          price: 14426,
          x: 8.03,
          y: 8.09,
          z: 5.07
        },
        {
          name: 16788,
          carat: 0.9,
          cut: 'Ideal',
          color: 'D',
          clarity: 'VS2',
          depth: 61.2,
          table: 56,
          price: 6689,
          x: 6.2,
          y: 6.26,
          z: 3.81
        }
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = new Chart({
        container: this.$refs.container,
        autoFit: true
        // width: 800,
        // height: 600,
      })
      // 声明可视化
      this.chart
        .interval()
        .data(this.data)
        .transform({
          type: 'groupX',
          y: 'max'
        })
        .encode('x', 'clarity')
        .encode('y', 'price')
        .encode('color', 'clarity')
        .axis('y', { labelFormatter: '~s' })
        .tooltip({ channel: 'y', valueFormatter: '~s' })

      // 渲染可视化
      this.chart.render()
    }
  },
  mounted() {
    this.renderChart()
  },
  beforeDestroy() {
    this.chart.destroy()
  }
}
</script>

<style scoped></style>
